<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>{$activity_info['jsonstr']['pageTitle']}</title>
    <link rel="stylesheet" type="text/css" href="{$Think.config.RESOURCEURL}wx_assets/scanforgift/css/index.css{$Think.config.RESOURCE_VER}" />
    <script src="{$Think.config.RESOURCEURL}wx_assets/scanforgift/js/remApp.js" type="text/javascript" charset="utf-8"></script>
   
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/layer.m.js" type="text/javascript" charset="utf-8"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/common.js{$Think.config.RESOURCE_VER}" type="text/javascript" charset="utf-8"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/womenday/js/wx_share.js{$Think.config.RESOURCE_VER}" type="text/javascript" charset="utf-8"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/scanforgift/js/city.js" type="text/javascript" charset="utf-8"></script>

</head>
<style>
    .container
    {
        padding: 1rem;
        background-color: #E56293;
        background-image: url({$activity_info.jsonstr.taskBg.src});
        background-repeat: no-repeat;
        background-size:cover;
        background-position: 50% 50%;
    }
</style>
<script type="text/javascript">
    var actId=$.util.getParamByObject("actId"),
    chanelId=$.util.getParamByObject("chanelId"),
    partake_id="{$record_info['partake_id']?$record_info['partake_id']:$record_info['partakeId']}",
    customerId=$.util.getParam("customerId"),
    fromUserId=$.util.getParam("fromUserId"),
    fromUserIdstr="",
    params={actId:actId},
    geturl=function(method,bool,object,type){
        if(chanelId)params.chanelId=chanelId;
        if(partake_id)params.partake_id=partake_id;
        fromUserIdstr=fromUserId?"&fromUserId="+fromUserId:"";
        if(!method)method="index";
        if(bool&&!fromUserId)
        fromUserIdstr="&fromUserId={$userId}";
        if(object)params=$.extend(true,params,object);
        return "call."+(type?type:"html")+"?module=scanforgift&method="+method+fromUserIdstr+"&customerId="+customerId+"&params="+encodeURIComponent(JSON.stringify(params))
    },
    sharelink=geturl("show");
</script>
<script type="text/javascript">
    var code="{$code}"
</script>
<body>
<div class="container">
    <div class="container-inner">
        <img src="{$activity_info.jsonstr.themeBtn.src}" alt="">
        <if condition="($record_info['gain_status'] eq '0') AND ($userId eq $record_info['userId'])">
          <if condition="$activity_info['jsonstr']['task_count'] elt $record_info['care_count']">
              <form id="form">
                <div class="inputbox">
                    <input name="real_name" type="text" placeholder="请输入姓名">
                </div>
                <div class="inputbox">
                    <input name="telephone" type="tel" placeholder="请输入手机号码">
                </div>

                <div class="type-{$activity_info['jsonstr']['goods_type']}">
                    <div class="inputbox">
                        <select name="province" id="province">

                        </select>
                    </div>
                    <div class="inputbox">
                        <select name="city" id="city">

                        </select>
                    </div>
                    <div class="inputbox">
                        <select name="area" id="area">

                        </select>
                    </div>
                    <div class="inputbox">
                        <textarea name="address" placeholder="请填写详细地址"></textarea>
                    </div>
                </div>
                
                <a href="javascript:;" id="submit">
                    <img src="{$activity_info.jsonstr.submitBtn.src}" alt="">
                </a>
            </form>
            <else />
            <style>.processbox{display: block !important;}</style>
          </if>
          <else />
          <if condition="($record_info['gain_status'] eq '1') AND ($userId eq $record_info['userId'])">
          <p style="text-align: center;margin:1rem 0;">恭喜您!您已成功领取奖品！工作人员将会与您取得联系，请静候佳音!</p>
          <style>.processbox{display: none !important;}</style>
          <else />
          <style>.processbox{display: block !important;}</style>
          </if>
        </if>
        <div class="processbox" style="display: none;">
            <div style="position: relative;">
                <span style="left:{$record_info['care_count']/$activity_info['jsonstr']['task_count']*100 | round=1}%" class="tag">{$record_info['care_count']/$activity_info['jsonstr']['task_count']*100 | round=1}%</span>
                <div class="processbox-inner">
                    <div>
                    <span style="width:{$record_info['care_count']/$activity_info['jsonstr']['task_count']*100}%;"></span>
                    </div>
                    <div class="circle" style="left:{$record_info['care_count']/$activity_info['jsonstr']['task_count']*100}%;"></div>
                </div>
                <div class="processbox-text">
                    <span>总需{$activity_info.jsonstr.task_count}人</span>
                    <span style="color:#E56293;float: right;">还差{$activity_info['jsonstr']['task_count']-$record_info['care_count']}人</span>
                </div>
            </div>
        </div>  
    </div>
</div>
</body>
<script type="text/javascript">
var receiveFailUrl="{$activity_info.jsonstr.receiveFailUrl}",
    receiveSuccessUrl="{$activity_info.jsonstr.receiveSuccessUrl}";
var baseUrl = '{$Think.config.SERVER_HOST}';
var shareData = {
        "title": "{$activity_info.title}",
        "desc": "{$activity_info.description}",
        "link": baseUrl+sharelink,
        "imgUrl": "{$activity_info.picurl}",
        "pkg": {
            "appId": '{$pkg.appId}',
            "timestamp": {$pkg['timestamp']?$pkg['timestamp']:'""'},
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        "hideOptionMenu":true
    }
var formartFormData=function(selector) {
    var el = typeof selector == "string" ? $(selector) : $(selector[0], selector[1]);
    var formData = el.serializeArray(),
        formDataJson = {};
    $.each(formData, function(index, val) {
        if (val.value) formDataJson[val.name] = val.value;
    });

    return formDataJson;
}
var getFormData=function(){
    var data=formartFormData("form");
    if(!data.real_name)layer.open({content:"请输入姓名"});
    else if(!data.telephone)layer.open({content:"请输入手机号码"});
    else
    {
        var url=geturl("update_record",null,data,"json");
        console.log(url);
        $.ajax({
            url:url,
            type:"GET",
            dataType:"json",
            beforeSend:function(){
                layer.open({
                    type: 2,
                    content: '提交表单'
                });
            },
            success:function(data){
                layer.closeAll();
                if(data.code)
                layer.open({
                    content:"提交成功",
                    success:function(){
                        window.location.reload();
                    }
                })
                else
                alert(data.info);
            }
        })
    }
}

$(function() {
    wx_share.init(shareData);

    $("#submit").on('click',function(){
        getFormData();
    })

    new PCAS("province","city","area");
})
</script>

</html>
